<!--消息页面-->
<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../iconfont/iconfont.css">
</head>
<style type="text/css">
	
	.mui-icon-back:before, .mui-icon-left-nav:before{
		color:black;
	}
	
	[v-cloak] {
		display: none;
	}
	
</style>
<body>
	<div id="App" v-cloak>
	</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/vue.min.js"></script>
<script type="text/javascript">
	
	var mv = new Vue({
		el:"#App",
		methods: {
			openUrl:function(url){
				mui.openWindow({
					url:url,
					id :url
				})
			}
		},
		methods:{
			
		},
		mounted:function(){
			mui.init();
			mui.plusReady(function(){
				
				
			});
		}
	})
	
	
	// 目标者
	class Subject {
	  constructor() {
	    this.observers = []; // 观察者列表
	  }
	 
	  // 添加订阅者
	  add(observer) {
	    this.observers.push(observer);
	  }
	 
	  // 删除...
	  remove(observer) {
	    let idx = this.observers.findIndex(item => item === observer);
	    idx > -1 && this.observers.splice(idx, 1);
	  }
	 
	  // 通知
	  notify(value) {
	    for(let o of this.observers) {
	      o.update(value);
	    }
	  }
	}
	 
	// 观察者
	class Observer {
	  constructor(name) {
	    this.name = name;
	  }
	 
	  // 目标对象更新时触发的回调，即收到更新通知后的回调
	  update(value) {
	    console.log(`目标者通知我更新了，我是：${this.name} value=`+value);
	  }
	}
	 
	// 实例化目标者
	let subject = new Subject();
	 
	// 实例化两个观察者
	let obs1 = new Observer('前端');
	let obs2 = new Observer('后端');
	 
	// 向目标者添加观察者
	subject.add(obs1);
	subject.add(obs2);
	 
	subject.notify(123);
	
	
	class Calculate{
		calculate(salary){
			return salary;
		}
	}
	
	class S_Levle extends Calculate {
		calculate(salary){
			return salary * 4;
		}
	}
	
	class A_Levle extends Calculate {
		calculate(salary){
			return salary * 3;
		}
	}
	
	class B_Levle extends Calculate {
		calculate(salary){
			return salary * 2;
		}
	}
	
	
	
	//接下来定义奖金类Bonus：
	class Bonus {
	  constructor() {
	    this.salary = null; // 原始工资
	    this.strategy = null; // 绩效等级对应的策略对象
	  }
	  setSalary(salary) {
	    this.salary = salary; // 设置员工的原始工资
	  }
	  setStrategy(strategy) {
	    this.strategy = strategy; // 设置员工绩效等级对应的策略对象
	  }
	  getBonus() { // 取得奖金数额
	    return this.strategy.calculate(this.salary); // 把计算奖金的操作委托给对应的策略对象
	  }
	}
	
	var bonus = new Bonus();
	bonus.setSalary(10000);
	
	bonus.setStrategy(new S_Levle()); 
	console.log(bonus.getBonus()); 
	
	bonus.setStrategy(new A_Levle());
	console.log(bonus.getBonus());
	
	bonus.setStrategy(new Calculate());
	console.log(bonus.getBonus());
	
	//闭包立即执行函数
	(()=>{
		console.log("Hi~~")
	})();
	
	
	
	
	
	
	

</script>
</html>